<div class="bg-slate-50 dark:bg-slate-900">
  <header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full text-sm">
    <nav
      class="
        relative
        max-w-7xl
        w-full
        mx-auto
        bg-white
        border-b border-gray-200
        py-3
        px-4
        sm:py-0
        sm:flex
        sm:items-center
        sm:justify-between
        sm:px-6
        lg:px-8
        xl:border-x
        dark:bg-gray-800
        dark:border-gray-700
      "
      aria-label="Global"
    >
      <div class="flex items-center justify-between">
        <a class="flex-none text-xl font-semibold dark:text-white" href="#" aria-label="Brand"
          >Brand</a
        >
        <div class="sm:hidden">
          <button
            type="button"
            class="
              hs-collapse-toggle
              p-2
              inline-flex
              justify-center
              items-center
              gap-2
              rounded-md
              border
              font-medium
              bg-white
              text-gray-700
              shadow-sm
              align-middle
              hover:bg-gray-50
              focus:outline-none
              focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600
              transition-all
              text-sm
              dark:bg-slate-900
              dark:hover:bg-slate-800
              dark:border-gray-700
              dark:text-gray-400
              dark:hover:text-white
              dark:focus:ring-offset-gray-800
            "
            data-hs-collapse="#navbar-collapse-with-animation"
            aria-controls="navbar-collapse-with-animation"
            aria-label="Toggle navigation"
          >
            <svg
              class="hs-collapse-open:hidden w-4 h-4"
              width="16"
              height="16"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                fill-rule="evenodd"
                d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
              />
            </svg>
            <svg
              class="hs-collapse-open:block hidden w-4 h-4"
              width="16"
              height="16"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        id="navbar-collapse-with-animation"
        class="
          hs-collapse
          hidden
          overflow-hidden
          transition-all
          duration-300
          basis-full
          grow
          sm:block
        "
      >
        <div
          class="
            flex flex-col
            gap-y-4 gap-x-0
            mt-5
            sm:flex-row
            sm:items-center
            sm:justify-end
            sm:gap-y-0 sm:gap-x-7
            sm:mt-0
            sm:pl-7
          "
        >
          <a
            class="font-medium text-blue-600 sm:py-6 dark:text-blue-500"
            href="#"
            aria-current="page"
            >Landing</a
          >
          <a
            class="
              font-medium
              text-gray-500
              hover:text-gray-400
              sm:py-6
              dark:text-gray-400
              dark:hover:text-gray-500
            "
            href="#"
            >Account</a
          >
          <a
            class="
              font-medium
              text-gray-500
              hover:text-gray-400
              sm:py-6
              dark:text-gray-400
              dark:hover:text-gray-500
            "
            href="#"
            >Work</a
          >
          <a
            class="
              font-medium
              text-gray-500
              hover:text-gray-400
              sm:py-6
              dark:text-gray-400
              dark:hover:text-gray-500
            "
            href="#"
            >Blog</a
          >

          <div
            class="
              hs-dropdown
              [--strategy:static]
              sm:[--strategy:absolute]
              [--adaptive:none]
              sm:[--trigger:hover]
            "
          >
            <button
              type="button"
              class="
                flex
                items-center
                w-full
                text-gray-500
                hover:text-gray-400
                font-medium
                dark:text-gray-400
                dark:hover:text-gray-500
              "
            >
              Dropdown
              <svg
                class="ml-2 w-2.5 h-2.5 text-gray-600"
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                ></path>
              </svg>
            </button>

            <div
              class="
                hs-dropdown-menu
                transition-[opacity,margin]
                duration-[0.1ms]
                sm:duration-[150ms]
                hs-dropdown-open:opacity-100
                opacity-0
                sm:w-48
                hidden
                z-10
                bg-white
                sm:shadow-md
                rounded-lg
                p-2
                dark:bg-gray-800
                sm:dark:border
                dark:border-gray-700
                dark:divide-gray-700
                before:absolute
                top-full
                sm:border
                before:-top-5
                before:left-0
                before:w-full
                before:h-5
              "
            >
              <a
                class="
                  flex
                  items-center
                  gap-x-3.5
                  py-2
                  px-3
                  rounded-md
                  text-sm text-gray-800
                  hover:bg-gray-100
                  focus:ring-2 focus:ring-blue-500
                  dark:text-gray-400
                  dark:hover:bg-gray-700
                  dark:hover:text-gray-300
                "
                href="#"
              >
                About
              </a>
              <div
                class="
                  hs-dropdown
                  relative
                  [--strategy:static]
                  sm:[--strategy:absolute]
                  [--adaptive:none]
                  sm:[--trigger:hover]
                "
              >
                <button
                  type="button"
                  class="
                    w-full
                    flex
                    justify-between
                    w-full
                    items-center
                    text-sm text-gray-800
                    rounded-md
                    py-2
                    px-3
                    hover:bg-gray-100
                    focus:ring-2 focus:ring-blue-500
                    dark:text-gray-400
                    dark:hover:bg-gray-700
                    dark:hover:text-gray-300
                  "
                >
                  Sub Menu
                  <svg
                    class="sm:-rotate-90 ml-2 w-2.5 h-2.5 text-gray-600"
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                    ></path>
                  </svg>
                </button>

                <div
                  class="
                    hs-dropdown-menu
                    transition-[opacity,margin]
                    duration-[0.1ms]
                    sm:duration-[150ms]
                    hs-dropdown-open:opacity-100
                    opacity-0
                    sm:w-48
                    hidden
                    z-10
                    sm:mt-2
                    bg-white
                    sm:shadow-md
                    rounded-lg
                    p-2
                    dark:bg-gray-800
                    sm:dark:border
                    dark:border-gray-700
                    dark:divide-gray-700
                    before:absolute
                    sm:border
                    before:-right-5
                    before:top-0
                    before:h-full
                    before:w-5
                    top-0
                    right-full
                    !mx-[10px]
                  "
                >
                  <a
                    class="
                      flex
                      items-center
                      gap-x-3.5
                      py-2
                      px-3
                      rounded-md
                      text-sm text-gray-800
                      hover:bg-gray-100
                      focus:ring-2 focus:ring-blue-500
                      dark:text-gray-400
                      dark:hover:bg-gray-700
                      dark:hover:text-gray-300
                    "
                    href="#"
                  >
                    About
                  </a>
                  <a
                    class="
                      flex
                      items-center
                      gap-x-3.5
                      py-2
                      px-3
                      rounded-md
                      text-sm text-gray-800
                      hover:bg-gray-100
                      focus:ring-2 focus:ring-blue-500
                      dark:text-gray-400
                      dark:hover:bg-gray-700
                      dark:hover:text-gray-300
                    "
                    href="#"
                  >
                    Downloads
                  </a>
                  <a
                    class="
                      flex
                      items-center
                      gap-x-3.5
                      py-2
                      px-3
                      rounded-md
                      text-sm text-gray-800
                      hover:bg-gray-100
                      focus:ring-2 focus:ring-blue-500
                      dark:text-gray-400
                      dark:hover:bg-gray-700
                      dark:hover:text-gray-300
                    "
                    href="#"
                  >
                    Team Account
                  </a>
                </div>
              </div>

              <a
                class="
                  flex
                  items-center
                  gap-x-3.5
                  py-2
                  px-3
                  rounded-md
                  text-sm text-gray-800
                  hover:bg-gray-100
                  focus:ring-2 focus:ring-blue-500
                  dark:text-gray-400
                  dark:hover:bg-gray-700
                  dark:hover:text-gray-300
                "
                href="#"
              >
                Downloads
              </a>
              <a
                class="
                  flex
                  items-center
                  gap-x-3.5
                  py-2
                  px-3
                  rounded-md
                  text-sm text-gray-800
                  hover:bg-gray-100
                  focus:ring-2 focus:ring-blue-500
                  dark:text-gray-400
                  dark:hover:bg-gray-700
                  dark:hover:text-gray-300
                "
                href="#"
              >
                Team Account
              </a>
            </div>
          </div>

          <a
            class="
              flex
              items-center
              gap-x-2
              font-medium
              text-gray-500
              hover:text-blue-600
              sm:border-l sm:border-gray-300
              sm:my-6
              sm:pl-6
              dark:border-gray-700
              dark:text-gray-400
              dark:hover:text-blue-500
            "
            href="#"
          >
            <svg
              class="w-4 h-4"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"
              />
            </svg>
            Log in
          </a>
        </div>
      </div>
    </nav>
  </header>

  <main id="content" role="main">
    <div
      class="
        max-w-7xl
        mx-auto
        min-h-screen
        bg-white
        border-x-gray-200
        py-10
        px-4
        sm:px-6
        lg:px-8
        xl:border-x
        dark:bg-gray-800
        dark:border-x-gray-700
      "
    >
      <!-- Page Heading -->
      <header class="max-w-3xl">
        <p class="mb-2 text-sm font-semibold text-blue-600">Starter Pages & Examples</p>
        <h1 class="block text-2xl font-bold text-gray-800 sm:text-3xl dark:text-white">
          Boxed Layout using Tailwind CSS
        </h1>
        <p class="mt-2 text-lg text-gray-800 dark:text-gray-400">
          This is a boxed layout example using Tailwind CSS.
        </p>
        <div class="mt-5 flex flex-col items-center gap-2 sm:flex-row sm:gap-3">
          <a
            class="
              w-full
              sm:w-auto
              inline-flex
              justify-center
              items-center
              gap-x-3
              text-center
              bg-blue-600
              hover:bg-blue-700
              border border-transparent
              text-white text-sm
              font-medium
              rounded-md
              focus:outline-none
              focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white
              transition
              py-3
              px-4
              dark:focus:ring-offset-gray-800
            "
            href="https://github.com/htmlstreamofficial/preline/tree/main/examples/html"
            target="_blank"
          >
            <svg
              class="w-4 h-4"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
              />
            </svg>
            Get the source code
          </a>
          <a
            class="
              w-full
              sm:w-auto
              inline-flex
              justify-center
              items-center
              gap-2
              rounded-md
              border border-transparent
              font-semibold
              text-blue-500
              hover:text-blue-700
              focus:outline-none
              focus:ring-2
              ring-offset-white
              focus:ring-blue-500 focus:ring-offset-2
              transition-all
              text-sm
              py-3
              px-4
              dark:ring-offset-slate-900
            "
            href="../examples.html"
          >
            <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path
                d="M11.2792 1.64001L5.63273 7.28646C5.43747 7.48172 5.43747 7.79831 5.63273 7.99357L11.2792 13.64"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
            Back to examples
          </a>
        </div>
      </header>
      <!-- End Page Heading -->
    </div>
  </main>
</div>
